<template>
  <div class="search">
    <div class="search_box">
      <i class="iconfont icon-search"></i>
      <!-- 输入框 -->
      <input
        type="text"
        placeholder="搜索歌曲、歌手、专辑"
        autocomplete="off"
        v-model.trim="ipuVal"
        @keyup.enter="add_search(ipuVal)"
      />
      <i class="iconfont icon-shanchu" @click="add_del()"></i>
    </div>
    <!-- 正常显示 -->
    <div class="search_main" v-show="toggle == 1">
      <p class="search_hot">热门搜索</p>
      <ul class="search_ul">
        <li
          class="search_ul_item"
          v-for="(item,idx) in music_hots"
          :key="idx"
          @click="add_search(item.first)"
        >{{item.first}}</li>
      </ul>
    </div>
    <!-- 点击input框输入时显示 -->
    <div v-show="toggle == 2" class="search_list">
      <p @click="add_search(`${ipuVal}`)">
        <i class="iconfont icon-search"></i>
        搜索："{{ipuVal}}"
      </p>
      <ul>
        <li v-for="(item,idx) in search_list" :key="idx" @click="add_search(item.name)">
          <i class="iconfont icon-search"></i>
          {{item.name}} {{item.artists[0].name}}
        </li>
      </ul>
    </div>
    <!-- 确定输入的关键字匹配出搜索结果 -->
    <div class="search_song_box">
      <!-- song组件 -->
      <song
        v-show="toggle == 3"
        v-for="(item,idx) in search_res"
        :key="idx"
        :song_data="{
          name:item.name,
          ar:item.artists[0].name,
          al:item.album.name,
          id:search_res,
          index:idx
        }"
        @play="play_music"
      ></song>
    </div>
  </div>
</template>
<script>
import { hotWord,search } from '../api/search'
import song from "../components/song";
export default {
  name: "search",
  data() {
    return {
      ipuVal: "",
      toggle: 1, // 为1显示默认画面，为2显示搜索中的画面，为3显示配出的搜索结果
      music_hots: null, // 默认热搜
      search_list: null, // input框输入多重匹配
      search_res: null, // 确定输入关键字匹配出搜索结果
      isMoHu: false,
    };
  },
  components: {
    song
  },
  async created() {
    let res = await hotWord();
    this.music_hots = res.data.result.hots;
  },
  watch: {
    async ipuVal(newVal) {
      // input框不为空&toggle = 2 显示搜索中的画面
      // 判断当前 input 的改变是否由模糊搜索点击触发
      if (this.ipuVal != "" && !this.isMoHu) {
        this.toggle = 2;
        let res = await search(newVal);
        this.search_list = res.data.result.songs.splice(0, 8);
      } else if (this.ipuVal == "") {
        this.toggle = 1;
      }
    }
  },
  methods: {
    // 输入关键字点击匹配搜索结果 & toggle = 3 显示配出的搜索结果
    async add_search(keywords) {
      this.isMoHu = true;
      this.ipuVal = keywords;
      this.search_list = null;
      this.toggle = 3;
      let res = await search(keywords);
      this.isMoHu = false;
      this.search_res = res.data.result.songs;
    },
    // 点击 (删除icon) 清除input框的值
    add_del() {
      this.ipuVal = "";
    },
    // 点击选中的歌名跳转页面并播放音乐
    play_music(name, song_data, index, ar) {
      console.log("播放音乐", name, song_data, index, ar);
      // 跳转路由到 item 播放音乐
      this.$router.push({
        name: "item",
        params: {
          name: name,
          id_list: song_data,
          index: index,
          ar: ar
        }
      });
    }
  }
};
</script>
<style lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.search {
  .search_box {
    width: 100vw;
    padding: 15px;
    border: 1px solid #ebecec;
    position: relative;
    .icon-search {
      position: absolute;
      top: 38%;
      left: 5%;
    }
    .icon-shanchu {
      position: absolute;
      top: 38%;
      right: 5%;
    }
    input {
      outline: none;
      width: 100%;
      height: 30px;
      border: 1px solid #ebecec;
      background: #ebecec;
      border-radius: 15px;
      padding: 0 7%;
      color: gray;
    }
  }
  // 默认显示热搜
  .search_main {
    .search_hot {
      font-size: 12px;
      text-align: left;
      height: 30px;
      line-height: 30px;
      padding-left: 15px;
    }
    .search_ul {
      display: flex;
      flex-flow: wrap;
      padding: 0 15px;
      .search_ul_item {
        border: 1px solid #ebecec;
        padding: 0 10px;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        border-radius: 20px;
        margin-right: 10px;
        margin-bottom: 10px;
        &:hover {
          background-color: skyblue;
          color: white;
        }
      }
    }
  }
  // 点击input框输入时显示
  .search_list {
    p {
      font-size: 14px;
      text-align: left;
      height: 30px;
      line-height: 30px;
      padding-left: 15px;
      border-bottom: 1px solid #ebecec;
      color: skyblue;
    }
    ul {
      padding: 0 15px;
      text-align: left;
      li {
        border-bottom: 1px solid #ebecec;
        padding: 0 10px;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        margin-right: 10px;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        &:hover {
          background-color: skyblue;
          color: white;
        }
      }
    }
  }
}
</style>